<template>
  <el-dialog title="价格组详情" :close-on-click-modal="false" :visible.sync="visible" center>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <el-form :model="dataForm" ref="dataForm" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="名称" prop="groupName">
            <el-input v-model="dataForm.groupName" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="关联部门" prop="deptList">
            <el-select v-model="deptList" multiple @change="selectChange($event)" disabled>
              <el-option v-for="item in deptOptions" :key="item.id" :value="item.id" :label="item.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注" prop="memo">
        <el-input v-model="dataForm.memo" disabled></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="info" @click="visible = false">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import { priceGroupGetObj } from '@/api/eims/price-group'
  import { getDeptInfo } from '@/api/admin/dept'

  export default {
    data() {
      return {
        visible: false,
        dataForm: {
          id: 0,
          groupName: '',
          memo: '',
          status: '',
          detailList: []
        },
        deptList: [],
        deptOptions: []
      }
    },
    methods: {
      init(id) {
        this.dataForm.id = id || 0
        this.deptList = []
        this.visible = true
        this.getDeptList()
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            priceGroupGetObj(this.dataForm.id).then(response => {
              if(response.data.code == '0'){
                this.dataForm = response.data.data
                this.dataForm.detailList.forEach(item => {
                  this.deptList.push(item.deptId)
                })
              }else{
                this.$message.error(response.data.msg)
              }
            })
          }
        })
      },
      // 获取部门列表
      getDeptList() {
        getDeptInfo().then(response => {
          if(response.data.code == '0'){
            this.deptOptions = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        })
      }
    }
  }
</script>
